<script lang="ts" setup>
import { ref, h, reactive, onMounted } from "vue";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes, VxeUI } from "vxe-table";
import { VxeFormProps, VxeButton } from "vxe-pc-ui";
import { Plus, Upload } from "@element-plus/icons-vue";
import { merchantsAccountList,listBank,listMerchantName } from '@/api/capital/capital'
// import CreateModal from "./components/CreateModal.vue";
// import deductModal from "./components/deductModal.vue";
// import TransferModal from "./components/TransferModal.vue";
const reVxeGridRef = ref();
import { useRouter } from "vue-router";
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"))
const router = useRouter();
onMounted(() => {
  
  getbank();///通道
});


// 通道
const bankOptions = ref<any[]>();
const getbank = ()=>{
  listBank().then(res => { 
    bankOptions.value = res.data.rows;
  })
}
const columns: VxeGridPropTypes.Columns<any> = [
  // { type: "checkbox", title: "", width: 60, align: "center" },
  {
    title: "系统户号",
    field: "systemAccount",
    align: 'center',
    minWidth: 100
  },
  {
    title: "开户名称",
    field: "merchantsInfoIdDisplay",
    align: 'center',
    showOverflow: false,
    minWidth: 100
  },
  {
    title: "通道名称",
    field: "bankName",
    align: 'center',
    minWidth: 100
  },
  {
    title: "商户账户",
    field: "subAccount",
    align: 'center',
    minWidth: 100
  },
  {
    title: "类型",
    field: "merchantsAccountTypeDisplay",
    align: 'center',
    minWidth: 100
  },
  {
    title: "可用金额(元)",
    field: "availableBalance",
    align: 'center',
    minWidth: 100
  },
  {
    title: "冻结金额(元)",
    field: "frozenAmount",
    align: 'center',
    minWidth: 100
  },
  {
    title: "总金额(元)",
    field: "actualAmount",
    align: 'center',
    minWidth: 100
  },
  {
    title: "开户时间",
    field: "createTime",
    align: 'center',
    minWidth: 100
  },
  
];

// 筛选相关
const formRef = ref();
interface FormDataVO {
  systemAccount: number | string; // 系统账户
  merchantsInfoId: number | string;//服务商
  taxSourcesId: number | string;//税源地
  bankName: string;//通道名称
  createTimeStart: number | string; //开始日期
  createTimeEnd: number | string; //结束日期
  timeRang: string[]; //日期数组  
}
const formOptions = reactive<VxeFormProps<FormDataVO>>({
  data: {
    systemAccount: '',
    merchantsInfoId: '',
    taxSourcesId: taxSourcesId,
    bankName: '',
    createTimeStart: '',
    createTimeEnd: '',
    timeRang: [],
  },
  items: [
    {
      field: "systemAccount",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "systemAccount" }
    },
    {
      field: "merchantsName",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "merchantsName" }
    },   
    {
      field: "bankName",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "bankName" }
    },
    {
      field: "timeRang",
      title: "",
      span: 4,
      itemRender: {},
      slots: { default: "timeRang" }
    },
    { align: "left", span: 4, slots: { default: "active" } }
  ]
});

// 服务商搜索
const fetchSuggestions = (queryString: any, cb: (params: any) => void) => {
  let subdata = <
    {
      merchantsName: string;
    }
  >{
    merchantsName: queryString
  };
  listMerchantName(subdata).then(result => {
    cb(result?.data?.rows);
  });
};
const autoselect = (res: any) => {
  console.log(res);
  formOptions.data.merchantsInfoId = res.id;
  formOptions.data.taxSourcesId = '';
  
};

// 重置内容
const handleInitialFormParams = () => {
  formOptions.data = <FormDataVO>{
    systemAccount: '',
    merchantsName: '',
    merchantsInfoId: '',
    taxSourcesId: '',
    bankName: '',
    createTimeStart: '',
    createTimeEnd: '',
    timeRang: [],    
  };
};
const handleSearch = () => {
  if (formOptions.data?.timeRang?.length) {
    formOptions.data.createTimeStart = formOptions.data.timeRang[0];
    formOptions.data.createTimeEnd = formOptions.data.timeRang[1];
  }
  reVxeGridRef.value.loadData();
};
const handleReset = async () => {
  await handleInitialFormParams();
  reVxeGridRef.value.loadData("reset");
};


const handleDelete = async (record: Recordable) => {
  const type = await VxeUI.modal.confirm("您确定要删除吗？");
  if (type == "confirm") {
    // deleteData(record.id).then(() => {
    //   handleSearch();
    // });
  }
};

const functions: Record<string, string> = {
  add: "platform.client.index.add",
  edit: "platform.client.index.edit",
  view: "platform.client.index.view",
  delete: "platform.client.index.delete"
};

// 退款
const createModalRef = ref();
const handleAdd = () => {
  createModalRef.value.showAddModal();
};
// 扣除
const deductModalRef = ref();
// 内部转账
const TransferModalRef = ref();
// const handleEdit = (record: Recordable) => {
//   createModalRef.value.showEditModal(record);
// };
// const handleView = (record: Recordable) => {
//   createModalRef.value.showViewModal(record);
// };
</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form ref="formRef" v-bind="formOptions">
        <template #systemAccount="{ data }">
          <el-input
            clearable
            placeholder="请输入系统户号"
            v-model="data.systemAccount"
          ></el-input>
        </template>
         
        <template #merchantsName="{ data }">
          <el-autocomplete
            clearable
            v-model="data.merchantsName"
            :fetch-suggestions="fetchSuggestions"
            placeholder="请选择开户名称"
            value-key="merchantsName"
            @select="autoselect"
          >
          </el-autocomplete>
        </template>
        
        <template #bankName="{ data }">
          <el-select clearable placeholder="请选择通道" v-model="data.bankName">
            <el-option
              v-for="(item, index) in bankOptions"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </template>
        
        <template #timeRang="{ data }">
          <el-date-picker
            clearable
            style="width: 100%"
            v-model="data.timeRang"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </template>
        <template #active>
          <el-button @click="handleSearch" native-type="submit" type="primary"
            >搜索</el-button
          >
          <el-button @click="handleReset" native-type="reset">重置</el-button>          
        </template>
      </vxe-form>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="merchantsAccountList"
        :functions="functions"
        :searchParams="formOptions.data"
        :columns="columns"
        :action="false"
        @handleAdd="handleAdd"
        @handleDelete="handleDelete"
      />
    </el-card>
    <!-- <CreateModal ref="createModalRef" @reload="handleSearch" />
    <deductModal ref="deductModalRef" @reload="handleSearch" />
    <TransferModal ref="TransferModalRef" @reload="handleSearch" /> -->
  </div>
</template>
